<template>
    <div>
        <el-main>
            <el-row :gutter="20">
                <el-page-header @back="goBack">
                </el-page-header>
                <el-col :span="20" :offset="2">
                    <el-card shadow="hover" v-for="(data,index) in formdata" :key="index">
                        <el-row :gutter="20" style="line-height:30px">
                            <el-col :span="4">
                                <el-image :src="data.image" fit="cover" style="width: 100px; height: 100px"></el-image>
                            </el-col>
                            <el-col :span="2">
                                <el-image :src="shuxian.url" fit="cover" style="width: 100px; height: 100px"></el-image>
                            </el-col>
                            <el-col :span="10">
                                <span class="name">{{data.storeName}}</span>
                                <br>
                                <span class="appraise">5.0分  </span>
                                <span class="sail">月售3000份</span>
                                <br>
                                <span class="description">{{data.description}}</span>
                            </el-col>
                            <el-col :span="6" :offset="2">
                                <br><br>
                                <el-button type="danger" round icon="el-icon-time" @click="buy(data)">{{data.statusDecode}}</el-button>
                                <el-button type="warning" round icon="el-icon-delete" @click="toCancel(data)" v-if="data.status == 1">取消</el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-empty :image-size="200" v-if="isEmpty"></el-empty>
                </el-col>
            </el-row>
        </el-main>
    </div>
</template>
<script>
import {getOrderData,toCancelOrder} from '@/utils/modules/customer.js'
export default {
    mounted(){
        this.getOrderData()
    },
    data() {
        return {
            isEmpty:false,
            formdata: [
                
            ],
            shuxian:{
                url:'/images/shuxian.png'
            },
            distinguish:'no'
        }
    },
    methods: {
        getOrderData(){
            getOrderData({'distinguish':this.distinguish}).then(res=>{
                this.formdata = res.data.itemList
                for(let i = 0 ; i < this.formdata.length ; i++)
                {
                    if(this.formdata[i].status == 1)
                    {
                        this.formdata[i].statusDecode = '待支付'
                    }else if(this.formdata[i].status == 5)
                    {
                        this.formdata[i].statusDecode = '已取消'
                    }
                    
                }
                this.$message({
                    type:'success',
                    message:res.message,
                    showClose:true
                })
            }).catch(err=>{
                if(this.formdata.length == 0){
                    this.isEmpty = true
                }
                this.$message({
                    type:'error',
                    message:err.message,
                    showClose:true
                })
            })
        },
        goBack(){
            this.$router.push({
                path:'/customer'
            })
        },
        buy(data){
            if(data.status == 1){
                this.$router.push({
                    path: '/pay',
                    query: {
                        order:JSON.stringify({
                            'marketerId':data.marketerId,
                            'dishId':data.dishId,
                            'dishNumber':data.dishNumber,
                            'dishTotalNumber':data.dishTotalNumber,
                            'amount':data.amount,
                            'flavor':data.flavor,
                            'id':data.id
                        })
                    }
                })
            }
        },
        toCancel(data) {
            toCancelOrder({ id: data.id }).then(res => {
                this.$message({
                    type: 'success',
                    message: res.message,
                    showClose: true
                })
                setTimeout(() => {
                    this.$router.go(0)
                }, 500)
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
    }
}
</script>
<style>
    /* 名字 */
.name {
    font-weight: 500;
    font-size: large;
    /* padding-left: 50%; */
}
/* 评分 */
.appraise {
    font-size: small;
    color: red;
    font-weight: 100;
    /* padding-left: 50%; */
}
/* 月售 */
.sail {
    font-size: small;
    font-weight: 100;
    color: #475669;
    /* padding-left: 50%; */
}
.description{
    font-size: small;
    color: lightgray;
    font-weight: 400;
}
</style>